<template>
	<view class="content">
		<view class="posline">
			<view class="posCon">
				<image src="@/static/Local.png" class="posIcon"></image>
				<view class="posText"></view>
				<image src="@/static/Down.png" class="posIcon"></image>
			</view>
			<view class="icontext">
				<image src="@/static/Plan.png" class="posIcon"></image>
				<text>签到</text>
			</view>
			<view class="icontext">
				<image src="@/static/Code.png" class="posIcon"></image>
				<text>会员</text>
			</view>
		</view>
		<view class="seachline">
			<image src="@/static/Search.png" class="inputIcon"></image>
			<input class="input" confirm-type="search" placeholder="限时秒杀" />
			<button class="searBtn">搜索</button>
		</view>
		<view class="swipper">
			<view class="swipCon">
				<image src="@/static/bannerLeft.png" class="conPic1"></image>
				<image src="@/static/qukankan.png" class="conPic2"></image>
			</view>
			<swiper :autoplay="true" :interval="3000" :duration="1000" :indicator-dots="true" indicator-color="#fff"
				indicator-active-color="#ff8b42" class="banner">
				<swiper-item v-for="item in bannerData" :key="item.id">
					<image :src="urls.baseURL+item.thumb"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="catagory">
			<view class="cataItem" v-for="item in categoryData" :key="item.id">
				<view class="cataPic" @click="handleNavigator(item.id)">
					<image :src="urls.baseURL+item.thumb" ></image>
				</view>
				<view class="cataText">{{item.category_name}}</view>
			</view>
		</view>
		<view class="fruitSel">
			<view class="fruits">
				<view class="fruit1">
					<image src="@/static/title1_1.png" class="title1"></image>
					<image src="@/static/fruit1.png" class="fruitPic"></image>
					<image src="@/static/fBtn1.png" class="fruitBtn"></image>
				</view>
				<view class="fruit2">
					<image src="@/static/title2_1.png" class="title2"></image>
					<image src="@/static/fruit2.png" class="fruitPic"></image>
					<image src="@/static/fBtn2.png" class="fruitBtn"></image>
				</view>
			</view>
			<view class="fruits">
				<view class="fruit1">
					<image src="@/static/title1_2.png" class="title1"></image>
					<image src="@/static/fruit3.png" class="fruitPic"></image>
					<image src="@/static/fBtn1.png" class="fruitBtn"></image>
				</view>
				<view class="fruit2">
					<image src="@/static/title2_2.png" class="title2"></image>
					<image src="@/static/fruit4.png" class="fruitPic"></image>
					<image src="@/static/fBtn2.png" class="fruitBtn"></image>
				</view>
			</view>
		</view>
		<view class="advline">
			<image src="@/static/adv.png"></image>
		</view>
		<view class="itemSec">
			<view class="item">
				<image class="itemCorner" src="@/static/corner.png"></image>
				<image class="itemPic" src="@/static/item1.png"></image>
				<image class="itemLine" src="@/static/line.png"></image>
				<image class="itemText" src="@/static/iText1.png"></image>
				<view class="itemTitle">
					<image src="@/static/zhaoPic.png" class="zhaoPic"></image>
					<text>茂谷柑【中】1份/约440g</text>
				</view>
				<view class="itemInfo">皮薄多汁 解渴润喉 全身是宝</view>
				<image class="tagPic" src="@/static/tag.png"></image>
				<view class="noPrice">￥39.9</view>
				<view class="price">￥35.9</view>
				<button class="itemBtn">选规格</button>
			</view>
			<view class="item">
				<image class="itemCorner" src="@/static/corner.png"></image>
				<image class="itemPic" src="@/static/item2.png"></image>
				<image class="itemLine" src="@/static/line.png"></image>
				<image class="itemText" src="@/static/iText2.png"></image>
				<view class="itemTitle">
					<image src="@/static/zhaoPic.png" class="zhaoPic"></image>
					<text>红盏甘美瓜【中】1/4个带皮/约1.2kg</text>
				</view>
				<view class="itemInfo">肉质粉红，口感偏沙</view>
				<view class="price2">￥28.56</view>
				<image class="tagPic2" src="@/static/tag2.png"></image>
				<button class="itemBtn">选规格</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import urls from "@/api/url";
	import { getBanner,getCategory} from "@/api/api";
	const bannerData = ref<BannerData[]>([]);
	const categoryData= ref<CategoryData[]>([]);
	onMounted(async () => {
		try{
			const res=await getBanner({page:1,limit:5,state:1});
			bannerData.value =( res.data as DataRes<BannerData[]>).data ;
		}catch(e){
			console.log(e)
		}
		// const res = await uni.request({
		// 	url: 'http://localhost:3000/banner', // 接口地址
		// 	method: 'GET', // 请求方法，默认 GET
		// 	data: {
		// 		page: 1,
		// 		limit: 5
		// 	},
		// });
	})
	onMounted(async () => {
		uni.setStorageSync("pid",2);
		try{
			const res=await getCategory({page:1,limit:10,pid:0});
			categoryData.value =( res.data as DataRes<CategoryData[]>).data ;
			categoryData.value.sort((a,b)=>a.sort-b.sort);
		}catch(e){
			console.log(e)
		}
	})
	const handleNavigator=(id:number)=>{
		uni.setStorageSync("pid",id);
		uni.switchTab({
			url:"/pages/classify/classify"
		})
		
	}
	
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 150vh;
		box-sizing: border-box;
		padding: 32rpx;
		background: linear-gradient(to bottom, #FFF0BA 10%, #fff 90%);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.posline {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
	}

	.posCon {
		width: 314rpx;
		height: 48rpx;
		margin-right: 236rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.conPic1 {
		width: 154rpx;
		height: 74rpx;
	}

	.conPic2 {
		width: 142rpx;
		height: 60rpx;
	}

	.posText {
		height: 100%;
		flex-grow: 1;
		background-color: blueviolet;
	}

	.icontext {
		width: 48rpx;
		height: 70rpx;
		margin-left: 36rpx;
		display: flex;
		flex-direction: column;
	}

	.icontext text {
		font-size: 16rpx;
		text-align: center;
	}

	.posIcon {
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
	}


	.seachline {
		width: 100%;
		height: 72rpx;
		position: relative;
	}

	.input {
		height: 100%;
		border-radius: 44rpx;
		background-color: #fff;
		padding: 0 146rpx 0 66rpx;
	}

	.inputIcon {
		width: 40rpx;
		height: 40rpx;
		top: 16rpx;
		left: 26rpx;
		position: absolute;
	}

	.searBtn {
		width: 140rpx;
		height: 60rpx;
		background: linear-gradient(to bottom right, #FF8041 0%, #FFCB42 100%);
		color: #fff;
		position: absolute;
		top: 6rpx;
		right: 6rpx;
		line-height: 60rpx;
		border-radius: 44rpx;
	}

	.swipper {
		width: 100%;
		height: 212rpx;
		background-color: rgba(255, 255, 255, .3);
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.swipper .swipCon {
		width: 252rpx;
		height: 212rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.banner {
		width: 466rpx;
		height: 212rpx;
		position: relative;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.banner swiper-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 466rpx;
		height: 100%;
	}

	.banner swiper-item image {
		width: 466rpx;
		height: 100%;
	}

	.catagory {
		width: 100%;
		height: 348rpx;
		background-color: rgb(255, 255, 255);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		padding: 20rpx 16rpx 26rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.cataItem {
		width: 106rpx;
		height: 132rpx;
		margin-right: 14rpx;
	}

	.cataPic,
	.cataPic image {
		width: 106rpx;
		height: 106rpx;
	}

	.cataText {
		height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 30rpx;
	}


	.fruitSel {
		width: 100%;
		height: 274rpx;
		display: flex;
		flex-direction: row;
	}

	.fruits {
		height: 100%;
		flex-grow: 1;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.fruits:first-child {
		background: linear-gradient(to bottom, #FFF0BA 0%, #FFFEF9 100%);
	}

	.fruits:last-child {
		background: linear-gradient(to bottom, #FFD8C3 0%, #FFFEF9 100%);
	}

	.fruit1,
	.fruit2 {
		width: 130rpx;
		height: 226rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.title1 {
		width: 100%;
		height: 32rpx;
	}

	.title2 {
		width: 100%;
		height: 26rpx;
	}

	.fruitPic {
		width: 132rpx;
		height: 132rpx;
	}

	.fruitBtn {
		width: 132rpx;
		height: 34rpx;
	}

	.advline,
	.advline image {
		width: 100%;
		height: 146rpx;
	}

	.itemSec {
		width: 100%;
		height: 586rpx;
		display: flex;
	}

	.item {
		width: 50%;
		height: 100%;
		position: relative;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.itemCorner {
		width: 54rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		right: 24rpx;
	}

	.itemPic {
		width: 238rpx;
		height: 244rpx;
		position: absolute;
		top: 30rpx;
		left: 36rpx;

	}

	.itemLine {
		width: 100%;
		height: 60rpx;
		position: absolute;
		top: 272rpx;
		left: 0rpx;
	}

	.itemText {
		width: 136rpx;
		height: 32rpx;
		position: absolute;
		top: 296rpx;
		right: 30rpx;
	}

	.itemTitle {
		width: 308rpx;
		height: 80rpx;
		position: absolute;
		top: 340rpx;
		left: 16rpx;
	}

	.itemTitle text {
		color: #000000;
		font-size: 30rpx;
		line-height: 40rpx;
	}

	.itemInfo {
		color: #8C8C8C;
		font-size: 20rpx;
		line-height: 30rpx;
		height: 30rpx;
		width: 284rpx;
		position: absolute;
		bottom: 132rpx;
		left: 16rpx;
	}

	.tagPic {
		width: 178rpx;
		height: 30rpx;
		position: absolute;
		bottom: 96rpx;
		left: 16rpx;
	}

	.tagPic2 {
		width: 100rpx;
		height: 28rpx;
		position: absolute;
		bottom: 22rpx;
		left: 16rpx;
	}

	.noPrice {
		color: #858685;
		font-size: 32rpx;
		text-decoration: line-through;
		height: 34rpx;
		width: 284rpx;
		line-height: 34rpx;
		position: absolute;
		bottom: 56rpx;
		left: 16rpx;
	}

	.price,
	.price2 {
		color: #F64F5F;
		font-size: 36rpx;
		height: 38rpx;
		width: 284rpx;
		line-height: 38rpx;
		position: absolute;
		bottom: 14rpx;
		left: 16rpx;
	}

	.price2 {
		bottom: 60rpx;
		left: 16rpx;
	}

	.itemBtn {
		width: 116rpx;
		height: 44rpx;
		border-radius: 22rpx;
		color: #fff;
		background: linear-gradient(to bottom right, #FFC742 0%, #FF8542 63%);
		position: absolute;
		bottom: 22rpx;
		right: 16rpx;
		font-size: 20rpx;
	}

	.zhaoPic {
		width: 54rpx;
		height: 28rpx;
	}
</style>